<template>
	<view class="myself">
		<!-- 头像区域 -->
		<uni-section title="头像" type="circle">
			<view class="example-body custom-image-box">
				<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
					file-mediatype="image" @select="select" return-type="object" v-model="imgpath" mode="grid">选择
				</uni-file-picker>
				<text class=" text">{{nickName}}</text>
				<view class="weixin-icon">
					<image src="../../static/icons/微信.png"></image>
				</view>
				<view class="xiugai-icon">
					<image src="../../static/icons/修改.png"></image>
				</view>
			</view>
		</uni-section>
		<!-- 导航 -->
		<view class="nav-cont">
			<view class="nav-first">
				个人信息
			</view>
			<view class="nav-second" @click="GoToTime">
				个人时间轴
			</view>
		</view>
		<!-- 表单区域 -->
		<uni-section title="编辑" type="square">
			<view class="example">
				<!-- 自定义表单校验 -->
				<uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData">
					<uni-forms-item label="姓名" name="name">
						<uni-easyinput v-model="customFormData.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="学号" name="xuehao">
						<uni-easyinput v-model="customFormData.xuehao" placeholder="请输入学号" />
					</uni-forms-item>
					<uni-forms-item label="电话" name="phone">
						<uni-easyinput v-model="customFormData.phone" placeholder="请输入手机号码" />
					</uni-forms-item>
					<uni-forms-item label="学校" name="school">
						<uni-data-select v-model="customFormData.school" :localdata="range" @change="change">
						</uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="学院" name="xueyuan">
						<uni-data-select v-model="customFormData.xueyuan" :localdata="range1" @change="change">
						</uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="专业" name="tech">
						<uni-data-select v-model="customFormData.tech" :localdata="range3" @change="change">
						</uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="性别" name="sex">
						<uni-data-select v-model="customFormData.sex" :localdata="range2" @change="change">
						</uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="生日" name="birth">
						<uni-datetime-picker v-model="customFormData.birth" />
					</uni-forms-item>
					<uni-forms-item label="情绪" name="emotion">
						<uni-data-select v-model="customFormData.emotion" :localdata="range4" @change="change">
						</uni-data-select>
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submit('customForm')" style="background-color:#dc5a5a;">保存</button>
			</view>
		</uni-section>
		<view class="btn-logout">
			<button @click="Logout" type="square">退出登录</button>
		</view>
	</view>
</template>

<script>
	import {
		SaveSelfInfo,
		GetSelfInfo
	} from '@/util/Token.js'
	export default {
		data() {
			return {
				nickName: this.$store.state.chat.userinfo.nickName,
				imgpath: {
					"name": "file.txt",
					"extname": "txt",
					"url": this.$store.state.chat.userinfo.photoPath,
				},
				value: 0,
				single: '',
				range: [{
						value: 0,
						text: "1111大学"
					},
					{
						value: 1,
						text: "2222大学"
					},
					{
						value: 2,
						text: "3333大学"
					},
				],
				range1: [{
						value: 0,
						text: "计算机学院"
					},
					{
						value: 1,
						text: "管理学院"
					},
					{
						value: 2,
						text: "外语学院"
					},
					{
						value: 2,
						text: "经济学院"
					},
					{
						value: 2,
						text: "数统学院"
					},
					{
						value: 2,
						text: "物电学院"
					},
					{
						value: 2,
						text: "体育学院"
					},
					{
						value: 2,
						text: "音乐学院"
					},
				],
				range2: [{
						value: 0,
						text: "男"
					},
					{
						value: 1,
						text: "女"
					},

				],
				range3: [{
						value: 0,
						text: "计算机科学"
					},
					{
						value: 1,
						text: "网络工程"
					},
					{
						value: 2,
						text: "物联网"
					},
					{
						value: 3,
						text: "电子商务"
					},
				],
				range4: [{
						value: 0,
						text: "良好"
					},
					{
						value: 1,
						text: "极好"
					},
					{
						value: 2,
						text: "差"
					},

				],

				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				// 自定义表单数据
				customFormData: {
					name: '',
					xuehao: '',
					phone: '',
					school: '',
					xueyuan: '',
					tech: '',
					sex: '',
					birth: '',
					emotion: ''


				},
				//自定义表单校验规则
				customRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					xuehao: {
						rules: [{
							required: true,
							errorMessage: '学号不能为空'
						}]
					},
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入电话号码',
							},
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '电话号码为11位',
							}
						]
					},
					school: {
						rules: [{
							required: true,
							errorMessage: '学校不能为空'
						}]
					},
					xueyuan: {
						rules: [{
							required: true,
							errorMessage: '学院不能为空'
						}]
					},
					tech: {
						rules: [{
							required: true,
							errorMessage: '专业必选'
						}]
					},
					sex: {
						rules: [{
							required: true,
							errorMessage: '性别必选'
						}]
					},
					birth: {
						rules: [{
							required: true,
							errorMessage: '请选择你的生日'
						}]
					},
					emotion: {
						rules: [{
							required: true,
							errorMessage: '请选择你当前情绪'
						}]
					}

				},
			}
		},
		onLoad() {
			const res = JSON.parse(GetSelfInfo());
			this.customFormData = {
				...res
			}
			console.log(this.customFormData)
		},
		methods: {
			submit(ref) {
				SaveSelfInfo(this.customFormData)
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			change(e) {
				console.log("e:", e);
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
			},
			// 
			GoToTime() {
				uni.navigateTo({
					url: '/pages/MyTime/MyTime'
				})
			},

			//退出登录
			async Logout() {
				await this.$store.dispatch('logout')
				// this.$store.dispatch('user/resetToken')
				uni.showToast({
					title: '退出成功',

				})
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/Login/Login',
					})
				}, 1000)





			}


		}
	}
</script>

<style lang="scss" scoped>
	.myself {
		width: 750rpx;
		height: auto;
		background-color: #fff;
		padding-bottom: 100rpx;

		// 上传图片
		.example-body {
			width: 230rpx;
			background-color: #fff;
			padding: 10px;
			padding-top: 0;
			position: relative;

			.text {
				font-size: 33rpx;
				color: #333;
			}

			.weixin-icon {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				z-index: 100;
				bottom: 2rpx;
				left: 60rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.xiugai-icon {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				z-index: 100;
				bottom: 33rpx;
				left: 350rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		// 上传图片
		.custom-image-box {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;

			align-items: center;
		}

		// 导航区
		.nav-cont {
			width: 600rpx;
			height: 90rpx;
			background-color: #fff;
			margin-top: 10rpx;
			margin-left: 40rpx;
			display: flex;

			.nav-first {
				width: 200rpx;
				height: 100rpx;
				font-size: 50rpx;
				line-height: 100rpx;
				margin-right: 40rpx;
				color: #c4d4e8;
				font-weight: 600;
			}

			.nav-second {
				width: 200rpx;
				font-size: 40rpx;
				height: 100rpx;
				line-height: 100rpx;
				color: #585858;
			}
		}

		//
		.btn-logout {
			width: 500rpx;
			height: 140rpx;
			margin: 0 auto;

		}

		// 表单
		.example {
			padding: 15px;
			background-color: #fff;

			uni-forms {
				width: 400rpx;
			}
		}
	}
</style>
